<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>徽章</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">
</head>
<body>
    <!--
        徽章主要用于突出显示新的或者未读的项，如果要使用徽章，只需要注意徽章的颜色
    -->
    <h1>徽章</h1>
    <span class="badge badge-primary">主要</span>
    <span class="badge badge-secondary">次要的</span>
    <span class="badge badge-success">成功的</span>
    <span class="badge badge-danger">危险的</span>
    <span class="badge badge-warning">警告</span>
    <span class="badge badge-info">信息</span>
    <span class="badge badge-light">浅色的</span>
    <span class="badge badge-dark">深色的</span>

    <hr>
    <h1>胶囊徽章</h1>
    <span class="badge badge-primary rounded-pill">主要</span>
    <span class="badge badge-secondary rounded-pill">次要的</span>
    <span class="badge badge-success rounded-pill">成功的</span>
    <span class="badge badge-danger rounded-pill">危险的</span>
    <span class="badge badge-warning rounded-pill">警告</span>
    <span class="badge badge-info rounded-pill">信息</span>
    <span class="badge badge-light rounded-pill">浅色的</span>
    <span class="badge badge-dark rounded-pill">深色的</span>

    <hr>
    <ul class="list-inline">
        <li class="list-inline-item">首页</li>
        <li class="list-inline-item">分类</li>
        <li class="list-inline-item">
            消息
            <span class="badge bg-secondary rounded-pill">5</span>
        </li>
    </ul>
</body>
</html>